<template>
    
  <div>
    <van-nav-bar title="月度账单" left-text="返回" left-arrow>
    <van-icon name="search" size="18" />
</van-nav-bar>
    <van-swipe class="my-swipe"  indicator-color="white" vertical>
        <!-- 第一页 -->
        <van-swipe-item>
            <div id="biling">
                {{mon[0]}}
            </div>
        <div id="cOnePage" >
            <div id="cPopup">
                <span>您好，{{ mon[1] }}</span>
                <span>连雨不知春去，一晴方觉夏深</span>
            </div>
            <img src="../assets/img/阅读账单.png" alt="">
        </div>
        <div id="cUpglide">
            <span>上滑查看</span>
            <van-icon name="arrow-down" color="#ffffff"/>
        </div>
        </van-swipe-item>
        <!-- 第二页 -->
        <van-swipe-item>
    <div id="cTwoPage_back" >
        <div id="cTwoPage">
            <div id="cExplain">
                <van-icon name="info-o" />
                <span>说明</span>
            </div>
            <div id="cProperty">
                <span>总资产</span>
                <span>(元)</span>
                <h1>{{always.sum | numFilter}}</h1>
            </div>
            <div id="cCompare">
                <div id="cCopmpare_left">
                    <span>比上月</span>
                    <span>{{always.compare_lastMonth | numFilter}}</span>
                </div>
                <div id="cCopmpare_right">
                    <span>上月末资产</span>
                    <span>{{always.last_mouth | numFilter}}</span>
                </div>
            </div>
            <div id="cOccupied"></div>
            <div id="cTypeAmount">
                <div id="ccDeposit">
                    <div id="ccDeposit_left">
                        <van-icon name="gold-coin-o" size="16px"/>
                        <span>存款 {{always.deposit | numFilter}}</span>
                    </div>
                    <div id="ccDeposit_right">
                        <van-icon name="gold-coin-o" size="16px" />
                        <span>债券 {{0.00 | numFilter}}</span>
                    </div>
                </div>
                <div id="cDebenture">
                    <div id="cDebenture_left">
                        <van-icon name="gold-coin-o" size="16px"/>
                        <span>理财 0.00</span>
                    </div>
                    <div id="cDebenture_right">
                        <van-icon name="gold-coin-o" size="16px"/>
                        <span>基金 {{ always.fund | numFilter}}</span>
                    </div>
                </div>
                
            </div>
            <div id="cProgress"><van-circle v-model="currentRate" :stroke-width="120" size="200px" :rate="100" :speed="100" :text="text" /></div>
            <div id="cTwoPopup">
                <span>您的资产增长空间巨大，加油哦</span>
            </div>
            <div id="cUpglide1">
                <span>上滑查看</span>
                <van-icon name="arrow-down" color="#000000"/>
            </div>
        </div>
    </div>
        </van-swipe-item>
        <!-- 第三页 -->
        <van-swipe-item>
            <div id="cThreePage_back">
            <div id="cThreePage" v-for="(item,index) in collect" :key="index">
                <div id="cExplain1">
                    <van-icon name="info-o" />
                    <span>说明</span>
                </div>
                <div id="cProperty1">
                    <span>收入</span>
                    <span>(元)</span>
                    <p>{{collect.diffreentvalue}}</p>
                </div>
                <div id="cCompare1">
                    <div id="cCopmpare1_left">
                        <span>比上月</span>
                        <van-icon name="back-top" color="red"/>
                        <span>{{collect.thisincome}}</span>
                    </div>
                    <div id="cCopmpare1_right">
                        <span>上月</span>
                        <span>{{collect.lastincome}}</span>
                    </div>
                </div>
                <div id="cOccupied1"></div>
                
                <div id="cProgress1"><van-circle v-model="currentRate" :stroke-width="120" size="200px" :rate="100" :speed="100" :text="text" /></div>
                <div id="cThreePopup">
                    <img src="../assets/img/排行榜(1).png" alt="">
                    <span><b>收入排行榜</b></span>
                </div>
                <div id="cUpglide2">
                    <span>上滑查看</span>
                    <van-icon name="arrow-down" color="#000000"/>
                </div>
                <div id="cRankingList">
                    <div id="cRankingList_left">
                        <div id="cRankingListOne">{{1}}</div>
                        <span>代付</span>
                    </div>
                    <p>￥681.00</p>
                </div>
            </div>
                </div>
    </van-swipe-item>
              <!-- 第四页 -->
            <van-swipe-item>
                <div id="cFourPage_back">
            <div id="cFourPage">
                <div id="cExplain2">
                    <van-icon name="info-o1" />
                    <span>说明</span>
                </div>
                <div id="cProperty2">
                    <span>支出</span>
                    <span>(元)</span>
                    <h1>{{ expense }}</h1>
                </div>
                <div id="cCompare2">
                    <div id="cCopmpare2_left">
                        <span>比上月</span>
                        <van-icon name="back-top" color="red"/>
                        <span>{{upexpense}}</span>
                    </div>
                    <div id="cCopmpare2_right">
                        <span>上月</span>
                        <span>{{superior.last_mouth}}</span>
                    </div>
                </div>
                <div id="cOccupied2"></div>
                
                <div id="cProgress2"><van-circle v-model="currentRate" :stroke-width="120" size="200px" :rate="100" :speed="100" :text="text" /></div>
                <div id="cFourPopup">
                    <img src="../assets/img/排行榜(1).png" alt="">
                    <span><b>支出排行榜</b></span>
                </div>
                <div id="cUpglide3" >
                    <span>上滑查看</span>
                    <van-icon name="arrow-down" color="#000000"/>
                </div>
                <div id="cRankingList1" v-for="(item,index) in list" :key="index">
                    <div id="cRankingList1_left">
                        <div id="cRankingListOne1">{{++index}}</div>
                        <span>{{item.descs}}</span>
                    </div>
                    <p>￥{{item.money}}</p>
                </div>
            </div>
    </div>
        </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
//月份
import {months} from "../api/MonthlyStatement"
//总资产
import {totalAssets} from "../api/MonthlyStatement"
//收入
import {income} from "../api/MonthlyStatement"
//总支出
import {expend} from "../api/MonthlyStatement"
//上月支出
import {upexpend} from "../api/MonthlyStatement"
//上月余额
import {Lastmonthsbalance} from "../api/MonthlyStatement"
//排行榜
import {rankinglist} from "../api/MonthlyStatement"
import {Dialog} from 'vant';
export default {
    data() {
        return {
            currentRate: 0,
            //月份
            mon:[],
            //总资产
            always:[],
            //总支出
            expense:[],
            //上月支出
            upexpense:[],
            //上月余额
            superior:[],
            //排行榜
            list:[],
            // 收入
            collect:[]
        }
        
    },
    
    filters: {
  numFilter (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
  }
},
    computed: {
        text() {
          return this.currentRate.toFixed(0) + '%';
        },
    },
    created(){  
        //月份
        this.month()
        //总价
        this.total()
        //收入
        this.earning()
        //本月支出
        this.expenditure()
        // 上月支出
        this.PreviousMonthBalance()
        //上月余额
        this.lastMonth()
        //排行榜
        this.seniority()
    },
    methods:{
        //月份
        month(){
            months().then((res)=>{
                if (res.code == 200) {
                    this.mon = res.data
                console.log(this.mon[1]); 
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }              
            }).catch((err)=>{
                console.log(err);
            })
        },
        //总资产
        total(){
            totalAssets().then((res)=>{
                if (res.code == 200) {
                    this.always = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
                
            }).catch((err)=>{
                console.log(err);
            })
        },
        //收入
        earning(){
            income().then((res)=>{
                if (res.code == 200) {
                    console.log(res);
                this.collect = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
                
            }).catch((err)=>{
                console.log(err);
            })
        },
        //总支出
        expenditure(){
            expend().then((res)=>{
                if (res.code == 200) {
                    this.expense = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
               
                // console.log(res);
            }).catch((err)=>{
                console.log(err);
            })
        },
        //上月支出
        PreviousMonthBalance(){
            upexpend().then((res)=>{
                if (res.code == 200) {
                    this.upexpense = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
            }).catch((err)=>{
                console.log(err);
            })
        },
        //上月余额
        lastMonth(){
            Lastmonthsbalance().then((res)=>{
                if (res.code == 200) {
                    this.superior = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
            }).catch((err)=>{
                console.log(err);
            })
        },
        //排行榜
        seniority(){
            rankinglist().then((res)=>{
                if (res.code == 200 ) {
                    this.list = res.data
                }else{
                    Dialog({title: '温馨提示', message: res.msg });
                }
               
            }).catch((err)=>{
                console.log(err);
            })
        }
    }
}
</script>

<style src="../assets/css/MonthlyStatement.css">

</style>